<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--引入本地的css样式-->
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/admin.css" media="all">

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        </div>
        <div class="layui-card-body">
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <!--            <button class="layui-btn layuiadmin-btn-admin" lay-event="batchdel">删除</button>-->
                    <button class="layui-btn layuiadmin-btn-admin" lay-event="add" id="add_employee" data-type="add_employee">添加</button>
                </div>
            </script>
            <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>
            <!--        1转换成正常显示到页面；2转换成冻结显示到页面 3转换成删除显示到页面 &ndash;&gt;-->
            <script type="text/html" id="statusTpl">
                {{#  if(d.status == 0){ }}
                <span>未启用</span>
                {{#  } else if(d.status == 1){ }}
                <span>启用</span>
                {{#  } }}
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="mod">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

        </div>
    </div>
</div>
<script src="../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
    layui.config({
        base: '../../static/layui/layuiadmin/' //静态资源所在路径js
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>



<script type="text/javascript">
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        table.render({
            elem: '#LAY-user-back-manage'//绑定到哪一个表格：#id值
            ,url:'/role/list'//servlet绑定路径
            ,title: '角色数据表'//标题
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'role_name', title:'角色名称',}
                ,{field:'role_date', title:'创建时间'}
                ,{field:'status ', title:'是否启用',templet:'#statusTpl'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,limits:[5,10,15,20]
        });
        table.on('tool(LAY-user-back-manage)', function(obj){
            var data = obj.data;//选中的当前行的数
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //通过ajax实现真正的删除
                    $.ajax({
                        url:"/role/del",
                        type:"post",
                        data:{role_name:data.role_name},
                        dataType:"json",
                        success:function (res) {
                            layer.alert(res.msg);
                            obj.del();//页面删除obj.del()
                            layer.close(index);
                        }
                    })

                });
            } else if(obj.event === 'mod'){
                layer.open({
                    type: 2
                    ,title: '修改角色信息'
                    ,content: 'mod.html'
                    ,area: ['450px', '550px']
                    ,maxmin:true
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var body = layer.getChildFrame('body', index)
                        //        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        var submitData = body.find('#myform').serialize();
                        console.log(submitData);
                        //提交 Ajax 成功后，静态表单中的数据
                        $.ajax({
                            url:"/role/mod",
                            type:"get",
                            data:submitData,
                            dataType:"json",
                            success:function (res) {
                                if(res.code == 200){
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        ,icon: 1
                                        ,time: 1000
                                    },function () {
                                        //刷新
                                        window.location.reload();
                                    });
                                }
                                if(res.code == 500){
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        ,icon: 1
                                        ,time: 1000
                                    },function () {
                                        //刷新
                                        window.location.reload();
                                    });
                                }
                                layer.close(index); //关闭弹层

                            }
                        })
                    }
                    ,success: function (layero, index) {//点击弹出框时，执行的函数。
                        //获取弹出编辑框的body内容
                        var body = layer.getChildFrame('body', index);
                        body.find("input[name=role_id]").val(data.role_id);
                        body.find("input[name=role_name]").val(data.role_name);
                        //找到body中input输入框，向employee_name输入框中塞入选中行的值
                        body.find("input[name=status]").val(data.status);
                    }
                });
            }
        });
        //头工具栏事件
        table.on('toolbar(LAY-user-back-manage)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'batchdel':
                    var data = checkStatus.data;
                    if(data.length < 1){
                        layer.msg('未选中删除的数据');
                    }else{
                        //删除，通过ajax方式进行删除
                        layer.confirm('真的删除选中行的数据么', function(index){
                            var ids = new Array();
                            $.each(data,function (index,item) {
                                //循环遍历勾选数据，只将要删除数据的id号获取处理，塞给数组对象
                                ids.push(item.finance_type);
                                console.log(ids);
                            })

                            //通过ajax传递给后端
                            $.ajax({
                                url:"/role/del",
                                type:"post",
                                data:{ids:ids},
                                traditional:true,//单纯的传递数组，需要将其进行传统序列化操作
                                dataType:"json",
                                success:function (res) {
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        ,icon: 1
                                        ,time: 2000
                                    },function () {
                                        //刷新
                                        window.location.reload();
                                    });
                                }
                            })
                        });

                    }
                    break;
                case 'add':
                    layer.open({
                        type: 2
                        ,title: '添加角色信息'
                        ,content: 'add.html'
                        ,area: ['450px', '550px']
                        ,maxmin:true
                        ,btn: ['保存', '取消']
                        ,yes: function(index, layero){
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            var submitData = body.find('#myform').serialize();//把add.html中表单中所有参数通过Ajax的data:submitData传递给服务器端
                            //提交 Ajax 成功后，静态表单中的数据
                            $.ajax({
                                url:"/role/add",
                                type:"post",
                                data:submitData,//所有表单中参数值
                                dataType:"json",
                                success:function (res) {
                                    if(res.code == 200){
                                        layer.msg(res.msg, {
                                            offset: '15px'
                                            ,icon: 1
                                            ,time: 1000
                                        },function () {
                                            //刷新
                                            window.location.reload();
                                        });
                                    }
                                    if(res.code == 500){
                                        layer.msg(res.msg, {
                                            offset: '15px'
                                            ,icon: 1
                                            ,time: 1000
                                        },function () {
                                            //刷新
                                            window.location.reload();
                                        });
                                    }
                                    layer.close(index); //关闭弹层
                                }
                            })
                        }
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


    });
</script>

</body>
</html>

